<template>
  <div id="home-page">
    <c-title text="随叫随到"></c-title>
    <search-box></search-box>
    <van-tabs v-model="active" @click="changeTab">
      <van-tab title="技能师傅" name="2" v-if="type == '' || type == '2'" >
        <van-swipe indicator-color="#4978F8" style="background: white;" v-if="publishLists.carousel_images.length > 0">
          <van-swipe-item v-for="(item, index) in publishLists.carousel_images" :key="index">
            <div class="img-box">
              <img :src="item" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>

        <van-swipe class="my-swipe" indicator-color="#4978F8">
          <van-swipe-item v-for="(item, index) in classifyData" :key="index">
            <div class="publisher-detail" >
              <div class="publisher-box" v-for="(citem, cindex) in item"  @click="goMoreList(citem.id)">
                <img :src="citem.thumb_url" alt="" />
                <span class="name">{{ citem.title }}</span>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
        <div class="near-technician">
          <div class="classification-name">
            <span class="name-classify">附近技师</span>
            <span class="more-classify" @click="tosearch">更多<van-icon name="arrow"/></span>
          </div>
          <div class="technician-pane">
            <div class="technician-box" @click="goTechnicianHome(item.id)" v-for="(item,index) in publishLists.nearby_shifu" :key="index">
              <img class="technician-img" :src="item.personal_pic" alt="">
              <div class="distance-stye">{{item.distance}}{{item.unit}}</div>
            </div>
          </div>
        </div>
        <div class="near-technician" v-for="(item,index) in publishLists.recommendCategory" :key="index">
          <div class="classification-name">
            <span class="name-classify">{{ item.title }}</span>
            <span class="more-classify" @click="goMoreList(item.id)">更多<van-icon name="arrow"/></span>
          </div>
          <div class="technician-pane">
            <div class="technician-box" v-for="(citem,cindex) in item.has_many_shifu" :key="cindex" @click="goTechnicianHome(citem.shifu_id)">
              <img class="technician-img" :src="citem.personal_pic" alt="">
              <div class="distance-stye">{{citem.distance}}{{citem.unit}}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="抢单大厅" name="1" v-if="type == '' || type == '1'" >
        <van-swipe indicator-color="#4978F8" style="background: white;" v-if="publishLists.carousel_images.length > 0">
          <van-swipe-item v-for="(item, index) in publishLists.carousel_images" :key="index">
            <div class="img-box">
              <img :src="item" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>

        <van-swipe class="my-swipe" indicator-color="#4978F8">
          <van-swipe-item v-for="(item, index) in classifyData" :key="index">
            <div class="publisher-detail" >
              <div class="publisher-box" v-for="(citem, cindex) in item" @click="goMoreList(citem.id)">
                <img :src="citem.thumb_url" alt="" />
                <span class="name">{{ citem.title }}</span>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
        <div class="classification-pane" v-for="(item,index) in publishLists.recommendCategory" :key="index">
          <div class="classification-name">
            <span class="name-classify">{{ item.title }}</span>
            <span class="more-classify" @click="goMoreList(item.id)">更多<van-icon name="arrow"/></span>
          </div>
          <div class="classification-detail">
            <div class="classification-box" @click="goividualNeeds(1,citem)" v-for="(citem,cindex) in item.has_many_need_order" :key="cindex" v-if="cindex < 3">
              <img :src="citem.thumb_url" alt="" />
              <span class="title">{{ citem.title }}</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="企业" name="3" v-if="type == '' || type == '3'" >
        <van-swipe indicator-color="#4978F8" style="background: white;" v-if="publishLists.carousel_images.length > 0">
          <van-swipe-item v-for="(item, index) in publishLists.carousel_images" :key="index">
            <div class="img-box">
              <img :src="item" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>

        <van-swipe class="my-swipe" indicator-color="#4978F8">
          <van-swipe-item v-for="(item, index) in classifyData" :key="index">
            <div class="publisher-detail" >
              <div class="publisher-box" v-for="(citem, cindex) in item" @click="goMoreList(citem.id)">
                <img :src="citem.thumb_url" alt="" />
                <span class="name">{{ citem.title }}</span>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
        <div class="classification-pane" v-for="(item,index) in publishLists.recommendCategory" :key="index">
          <div class="classification-name">
            <span class="name-classify">{{ item.title }}</span>
            <span class="more-classify" @click="goMoreList(item.id)">更多<van-icon name="arrow"/></span>
          </div>
          <div class="classification-detail">
            <div class="classification-box" @click="goividualNeeds(3,citem)" v-for="(citem,cindex) in item.has_many_enterprise_order" :key="cindex" v-if="cindex < 3">
              <img :src="citem.has_one_category.thumb_url" alt="" />
              <span class="title">{{citem.title}}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <bottom-bar tab_type="大厅"></bottom-bar>
  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#home-page {
  padding-bottom: 6rem;

  .img-box {
    img {
      width: 100%;
    }
  }

  .my-swipe {
    background: white;
    padding-bottom: 0.5rem;
  }

  .publisher-detail {
    margin: 0.2rem 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.2rem;
    // background: white;
    // height: 9.83rem;
    padding-bottom: 0.6rem;

    .publisher-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 0.6rem;
      width: 20%;

      img {
        width: 3.2rem;
        height: 3.2rem;
        background: #e8e8e8;
        border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
        opacity: 1;
        margin: 0;
        border-radius: 50%;
      }

      .name {
        font-size: 0.8rem;
        font-weight: 400;
        color: #090909;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        word-break: break-all;
        overflow: hidden;
        margin-top: 0.2rem;
      }
    }
  }

  .classification-pane {
    background: white;
    padding: 0.6rem;
    margin-top: 0.6rem;

    .classification-name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name-classify {
        background: #fff;
        text-align: left;
        width: 88%;
        font-size: 0.9rem;
        color: #090909;
      }

      .more-classify {
        font-size: 0.8rem;
        font-weight: 400;
        color: #999;
      }
    }

    .classification-detail {
      margin-top: 0.6rem;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;

      .classification-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 6.8rem;

        img {
          width: 6.8rem;
          height: 6.8rem;
          background: #e8e8e8;
          border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
          margin: 0;
        }

        .title {
          font-size: 0.85rem;
          font-weight: 400;
          color: #090909;
          margin-top: 0.2rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
          overflow: hidden;
        }
      }
    }
  }

  .near-technician {
    background: white;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;

    .classification-name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name-classify {
        background: #fff;
        text-align: left;
        width: 88%;
        font-size: 0.85rem;
        color: #090909;
      }

      .more-classify {
        font-size: 0.75rem;
        font-weight: 400;
        color: #999;
      }
    }

    .technician-pane {
      display: flex;
      overflow: auto;

      .technician-box {
        display: flex;
        flex-direction: column;
        margin-top: 0.6rem;
        margin-right: 0.6rem;

        .technician-img {
          width: 6.8rem;
          height: 5.6rem;
          background: #e8e8e8;
          border-radius: 0.2rem 0.2rem 0 0;
          margin: 0;
        }

        .distance-stye {
          height: 1.2rem;
          width: 6.8rem;
          line-height: 1.2rem;
          background: #000;
          border-radius: 0 0 0.2rem 0.2rem;
          opacity: 0.45;
          color: white;
          font-size: 0.7rem;
          font-weight: 400;
        }
      }
    }
  }
}

::v-deep .van-swipe__indicator {
  width: 1rem;
  height: 0.22rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
}

::v-deep .van-swipe__indicators {
  bottom: 15px;
}

::v-deep .van-tabs__wrap {
  margin-bottom: 0.6rem;
}
</style>
